import React, { useState } from 'react';
import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import { FileCopy } from '@material-ui/icons';
import { GridListTileBar, IconButton, Snackbar } from '@material-ui/core';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import Alert from '@material-ui/lab/Alert';
import { imgData } from './imgSource/imgSource';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: 'flex',
      flexWrap: 'wrap',
      justifyContent: 'space-around',
      overflow: 'hidden',
      backgroundColor: theme.palette.background.paper,
    },
    gridList: {
      width: "70%",
      height: "100%",
      transform: 'translateZ(0)',
    },
    icon: {
      color: 'rgba(255, 255, 255, 0.54)',
    },
  }),
);

export default function ImageGridList() {
  const classes = useStyles();
  const [value, setValue] = useState("");
  const [open, setOpen] = React.useState(false);

  const onClick = (url: string) => {
    setOpen(true);
    setValue(url);
  }

  const handleClose = (event?: React.SyntheticEvent, reason?: string) => {
    if (reason === 'clickaway') {
      return;
    }
    setOpen(false);
  };

  return (
    <div className={classes.root}>
      <Snackbar open={open} autoHideDuration={2000} onClose={handleClose}>
        <Alert onClose={handleClose} severity="success">
          复制成功！
        </Alert>
      </Snackbar>
      <GridList cellHeight={540} className={classes.gridList} cols={3}>
        {imgData.map((tile) => (
          <GridListTile key={tile.img} cols={tile.cols || 1}>
            <img src={tile.img} alt={tile.title} />
            <GridListTileBar
              title={tile.title}
              actionIcon={
                <CopyToClipboard text={value}>
                  <IconButton
                    aria-label={`info about ${tile.title}`}
                    className={classes.icon}
                    onClick={() => {
                      onClick("http://breakfast_eggs.gitee.io" + tile.img)
                    }}
                  >
                    <FileCopy />
                  </IconButton>
                </CopyToClipboard>
              }
            />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}